<script >
export default {
  data() {
      return {
    count:99
  }
  },
  methods: {
    add() {    this.count++}

  },
  computed: {
    double() {
      return this.count*2
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log('count', newValue, oldValue)
    }
  },
  beforeMount() { 
    console.log('beforeMount',document.querySelector('input'))
  },

  mounted() {
    console.log('mounted',document.querySelector('input'))  
  }

}

</script>

<template>
  <div>
    <div>{{count}}</div>
    <button @click="add">+</button>>
    <h1>{{ double }}</h1>
    <input type="text">
  </div>
</template>

<style lang="scss" scoped>

</style>